<template>
  <div class="brand-container">
    <mapcontainer class="map-background"></mapcontainer>
    <div class="wrap">
      <header>
        <div class="weather">
          <img :src="imgSrc">
          <span class="tem">{{ temperature }}°C</span>
          <span class="wea">{{ city }}</span>
        </div>

        <h2 style="font-family: monospace;"> <a href="./">{{ projectTitle }}</a></h2>
        <div class="showTime">
          <span class="time">{{ nowTime }}</span>
          <span class="date">
            <span>{{ week }}</span>
            <span>{{ date }}</span>
          </span>
        </div>
      </header>

      <section class="mainbox">
        <div class="item left">
          <div class="panel">
            <h2>工单详情</h2>
            <LeftTop></LeftTop>
            <div class="panel-footer"></div>
          </div>
        </div>
        <div class="item right" :class="{ 'no-data': !hasData }">
          <div class="panel">
            <h2>设备信息</h2>
            <RightTop></RightTop>
            <RightBottom></RightBottom>
            <div class="panel-footer"></div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hasData: false, // 这个变量根据实际数据是否存在进行设置
      imgSrc: 'path/to/weather-image.png',
      temperature: 25,
      city: '北京',
      projectTitle: '项目标题',
      nowTime: '12:00',
      week: '星期一',
      date: '2024-08-06'
    }
  }
}
</script>

<style scoped>
.brand-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-background {
  position: absolute;
  width: 100%;
  height: 100%;
}

.wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.weather {
  display: flex;
  align-items: center;
}

.weather img {
  width: 50px;
  height: 50px;
}

.showTime {
  display: flex;
  align-items: center;
}

.showTime .time {
  margin-right: 10px;
}

.mainbox {
  display: flex;
  flex: 1;
}

.item {
  flex: 1;
  padding: 10px;
}

.item.left, .item.right {
  display: flex;
  flex-direction: column;
}

.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
  min-width: 300px;
  min-height: 300px; /* 设置最小高度和宽度 */
}

.panel-footer {
  margin-top: auto;
}

.item.right.no-data .panel {
  min-width: 300px; /* 设置没有数据时的最小宽度 */
  min-height: 300px; /* 设置没有数据时的最小高度 */
}
</style>
